<template>
	<view style="padding: 30rpx;">
		<view style="text-align: center;margin-bottom: 20rpx;">金额明细</view>
		<scroll-view scroll-x>
			<view style="display: flex;align-items: center;">
				<image v-for="product in checkedProducts" :key="product.id" mode="widthFix" :src="product.thumbnail"
					style="width: calc((100vw - 60rpx - 60rpx) / 4);height: calc((100vw - 60rpx - 60rpx) / 4);margin-right: 20rpx;" />
			</view>
		</scroll-view>
		<view style="margin-top: 10rpx;line-height: 60rpx;">商品总价：<view style="float: right;">¥{{originalTotal| money}}</view>
		</view>
		<view @click="show = !show" style="line-height: 60rpx;">
			店铺优惠：
			<view style="float: right;">
				<text style="color:#fa436a;">¥{{discount| money}}</text>
				<u-icon style="transform: scaleX(.8);" name="arrow-down"></u-icon>
			</view>
		</view>
		<view v-show="show" style="background-color: #f5f5f5;padding: 20rpx;border-radius: 10rpx;">
			<view v-for="(item,itemIndex) in discountItems"
				:class="{'supplier':itemIndex>0&&itemIndex<discountItems.length}" :key="item.id">
				<view>{{item.name}}</view>
				<view style="font-size: 24rpx;margin-top: 10rpx;" v-for="(discount,index) in item.discountList"
					:class="{'supplier':index>0&&index<item.discountList.length}" :key="index">
					<scroll-view scroll-x>
						<view style="display: flex;align-items: center;">
							<view v-for="product in discount.goodsList" :key="product.id"
								style="margin-right: 10rpx;text-align: center;">
								<image mode="widthFix" :src="product.thumbnail" style="width: 90rpx;height: 90rpx;" />
								<view style="color: #ff7200;">优惠¥{{getDiscount(product)| money}}</view>
							</view>
						</view>
					</scroll-view>
					<view style="margin-top: 10rpx;">
						<text style="color: #ff7200;margin-right: 10rpx;">{{discount.activity.name}}</text>
						<text style="color: #909090;">
							{{discount.activity.activityStartTime}} ~ {{discount.activity.activityEndTime}}
						</text>
					</view>
					<view style="margin-top: 10rpx;">
						<u-tag size="mini" :text="discount.rule.num+'件'+discount.rule.discount+'折'" mode="plain" type="error" />
						<text style="color: #ff7200;margin-left: 10rpx;">
							小计：¥{{discount.total| money}} 优惠：¥{{discount.discount| money}}
						</text>
					</view>
				</view>
			</view>
		</view>
		<view style="line-height: 60rpx;">
			合计：<view style="float: right;">¥{{total| money}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cartDiscount",
		props: {
			data: {
				type: Array,
				default: () => {
					return []
				}
			},
			total: 0,
			discount: 0
		},
		watch: {
			data: {
				handler(newVal) {

				},
				immediate: true,
				deep: true
			}
		},
		computed: {
			originalTotal() {
				return this.total.addFloat(this.discount)
			},
			checkedProducts() {
				const result = []
				this.data.forEach(item => {
					const temp = item.cartProducts.filter(item => item.checked)
					if (temp.length > 0) {
						result.push(...temp)
					}
				})
				return result
			},
			discountItems() {
				return this.data.filter(item => item.discountList && item.discountList.length > 0)
			}
		},
		data() {
			return {
				show: false
			}
		},
		methods: {
			getDiscount(product) {
				return product.originalPrice.subtractFloat(product.realPrice)
			}
		}
	}
</script>

<style lang="scss">
	.supplier {
		border-top: 2rpx dashed #e2e2e2;
		margin-top: 10rpx;
	}
</style>
